<div class="events-title-row">
  <h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_EVENTS.TITLE' | translate }}</h2>
  <a mat-icon-button href="https://zitadel.com/docs/concepts/features/audit-trail" rel="noreferrer" target="_blank">
    <mat-icon class="icon">info_outline</mat-icon>
  </a>
</div>
<p class="events-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_EVENTS.DESCRIPTION' | translate }}</p>

<cnsl-refresh-table [hideRefresh]="true" (refreshed)="refresh()" [loading]="_loading | async">
  <div actions>
    <cnsl-filter-events (requestChanged)="filterChanged($event)"></cnsl-filter-events>
  </div>

  <table
    [dataSource]="dataSource"
    mat-table
    class="table views-table"
    aria-label="Views"
    matSort
    (matSortChange)="sortChange($event)"
  >
    <ng-container matColumnDef="editor">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.EDITOR' | translate }}</th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | toobject as event">
          <div class="editor-row" *ngIf="event.editor as editor">
            <!-- <cnsl-avatar
              *ngIf="editor && editor.displayName; else cog"
              class="avatar"
              [name]="editor.displayName"
              [avatarUrl]="editor.avatarUrl || ''"
              [forColor]="editor.preferredLoginName ?? editor.displayName"
              [size]="32"
            >
            </cnsl-avatar>
            <ng-template #cog>
              <cnsl-avatar [forColor]="editor?.preferredLoginName ?? 'franz'" [isMachine]="true">
                <i class="las la-robot"></i>
              </cnsl-avatar> </ng-template
            > -->
            <span class="name" *ngIf="editor.displayName">{{ editor.displayName }}</span>
            <span class="state" *ngIf="editor.service">{{ editor.service }}</span>
          </div>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="aggregate">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.AGGREGATE' | translate }}</th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | toobject as event">
          <div class="aggregate-row">
            <span class="id">{{ event.aggregate.id }}</span
            ><span class="state" *ngIf="event.aggregate?.type?.localized?.localizedMessage">{{
              event.aggregate.type.localized.localizedMessage
            }}</span>
          </div>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="resourceOwner">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.RESOURCEOWNER' | translate }}</th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | toobject as event">
          <span *ngIf="event.aggregate.resourceOwner">{{ event.aggregate.resourceOwner }}</span>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef>
        {{ 'IAM.EVENTS.SEQUENCE' | translate }}
      </th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | toobject as event">
          {{ event.sequence }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="creationDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header [start]="'desc'" [disableClear]="true">
        {{ 'IAM.EVENTS.CREATIONDATE' | translate }}
      </th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | toobject as event">
          <span>{{ event?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm:ss' }}</span>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.TYPE' | translate }}</th>
      <td mat-cell *matCellDef="let event" data-e2e="event-type-cell">
        <ng-container *ngIf="event | toobject as event">
          <span *ngIf="event.type?.localized?.localizedMessage">{{ event.type.localized.localizedMessage }}</span>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="payload">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.PAYLOAD' | translate }}</th>
      <td mat-cell *matCellDef="let event">
        <ng-container *ngIf="event | topayload as payload">
          <span>{{ payload | json }}</span>
          <div class="btn-wrapper">
            <button class="open-in-dialog-btn" mat-icon-button (click)="openDialog(event)">
              <mat-icon svgIcon="mdi_arrow_expand"></mat-icon>
            </button>
          </div>
        </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <cnsl-paginator
    #paginator
    class="paginator"
    [hidePagination]="true"
    [showMoreButton]="true"
    [disableShowMore]="_done | async"
    (moreRequested)="more()"
    [length]="dataSource.data.length"
  >
  </cnsl-paginator>
</cnsl-refresh-table>
